<template>
  <div>
    <header-comm></header-comm>
    <div class="bcg">
      <div class="apilist_box">
        <h2 class="my_tit">申请数据</h2>
        <div class="router_myapi">
          <a-button>
            <router-link to="/myapi"><a-icon type="user" style='fontSize:16px;color:#fff;' />我的API</router-link>
          </a-button>
        </div>
        <!-- <div class="apilist_ser">
          <div class="btn_box">
            <a-button type="primary">+申请新数据</a-button>
          </div>
          <div class="serch_box">
            <a-input-search placeholder="已申请数据检索" style="width: 250px" @search="onSearch" />
          </div>
        </div>-->
        <div class="apilist_con">
          <a-radio-group name="radioGroup" :default-value="active_api" @change="apiChange">
            <a-radio
              v-for="(item, i) in apidataList"
              :key="i"
              :value="i+1"
              @click="apiclickradio(item)"
              class="api_rad_li"
              :class="active_api==i+1?'active':''"
            >
              <div class="api_radio">
                <span>
                  <a-icon style="fontSize:20px" type="yuque" />
                  {{item.apiName}}
                </span>
              </div>
            </a-radio>
            <!-- <a-radio :value="2" class="api_rad_li" :class="active_api==2?'active':''">
              <div class="api_radio">
                <span>
                  <a-icon type="yuque" />产品样本参数API
                </span>
              </div>
            </a-radio>
            <a-radio :value="3" class="api_rad_li" :class="active_api==3?'active':''">
              <div class="api_radio">
                <span>
                  <a-icon type="yuque" />产品样本参数API
                </span>
              </div>
            </a-radio>-->
          </a-radio-group>
          <div class="sele_list">
            <p>当前选择：</p>
            <h3 class="sele_tit">
              <a-icon type="yuque" />{{apidataList[active_api-1].apiName}}
            </h3>
            <div class="btn_box">
              <a-button type="primary" @click="apiApplynow">立即申请</a-button>
            </div>
            <div class="agree_p">
              <a-checkbox @change="agreeChange" style="color:#999">
                我已阅读并同意
                <span class="apitext_color">《API申请购买服务协议》</span>，
                并确保合法使用此数据，不得用于一切违法行为！
              </a-checkbox>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headerComm from "../header-comm/header.vue";
import qs from "qs";
export default {
  inject: ["reload"],
  data() {
    return {
      active_api: 1,
      apidataList: "",
      api_radio_val: "",
      api_checked: false
    };
  },

  methods: {
    onSearch(value) {
      console.log(value);
    },
    apiChange(e) {
      this.active_api = e.target.value;
      console.log(e.target.value);
    },
    apiclickradio(item) {
      this.api_radio_val = item;
    },
    agreeChange(e) {
      console.log(`checked = ${e.target.checked}`);
      this.api_checked = e.target.checked;
    },

    getapidataList() {
      this.axios
        .post(
          "dataCenter/apidataList.php",
          qs.stringify({
            page: 1,
            pageSize: 10
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.apidataList = res.data.result.data;
            this.api_radio_val = res.data.result.data[0];
          }
        });
    },
    apiApplynow() {
      if (this.api_checked) {
        this.axios
          .post(
            "dataCenter/applyApiData.php",
            qs.stringify({
              sqdwid: this.$store.state.bbl_sqdwid,
              applyPeople: sessionStorage.getItem("bdwxnc"),
              applyCompany: sessionStorage.getItem("dwmc"),
              applyPhone:this.$store.state.bbl_phone,
              apiCode: this.api_radio_val.apiCode,
              apiName: this.api_radio_val.apiName,
              buyNum: 0
            })
          )
          .then(res => {
            console.log(res);
            if (res.data.code == 303) {
              this.$notification["success"]({
                message: "成功",
                description: res.data.msg
              });
              this.reload();
            } else {
              this.$notification["error"]({
                message: "失败",
                description: res.data.msg
              });
            }
          });
      } else {
        this.$notification["error"]({
          message: "成功",
          description: "请阅读并同意购买协议"
        });
      }
    }
  },
  components: {
    headerComm
  },
  created() {
    this.getapidataList();
  }
};
</script>

<style lang='less'>
.apilist_box {
  position: relative;
  top: 70px;
  left: 1%;
  width: 98%;
  height: 800px;
  background: #fff;
  padding: 20px;
  text-align: left;
  .my_tit {
    text-align: left;
    font-weight: bold;
    border-bottom: 1px solid #f1f1f1;
    padding: 0 15px 20px;
    position: relative;
  }
  .my_tit::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 3px;
    height: 15px;
    background: #cccccc;
  }
  .router_myapi {
    position: absolute;
    right: 22px;
    top: 24px;
    button{
          background: #00c4ff;
    border-color: #00c4ff;
    color:#fff;
    }
  }
  //   .apilist_ser {
  //     display: flex;
  //     button{
  //            background: #00c4ff;
  //     border-color: #00c4ff;
  //     }
  //     .serch_box {
  //       margin-left: 20px;
  //     }
  //   }
  .apilist_con {
    width: 96%;
    margin: 70px auto;
    padding: 0px 30px;
    border-left: 1px solid #f1f1f1;
    .api_radio {
      display: inline-block;
    }
    .ant-radio-group {
      width: 100%;
      .api_rad_li {
        width: 32%;
        // border: 1px solid #ccc;
        padding: 10px 15px;
        border-radius: 5px;
        font-size: 16px;

        .ant-radio {
          position: absolute;
          right: 13px;
          top: 13px;
        }
        .ant-radio-inner {
          border-color: #fff;
        }
      }
      .active {
        border: 1px solid #00c4ff;
        color: #00c4ff;
        .ant-radio-inner {
          border-color: #1890ff;
        }
      }
    }
  }
  .sele_list {
    margin-top: 75px;
    padding: 50px 0 0;
    border-top: 2px solid #f1f1f1;
    p {
      margin: 0;
    }
    .sele_tit {
      padding: 20px 0;
      font-weight: bold;
      font-size: 18px;
      border-bottom: 1px solid #f1f1f1;
      margin: 0;
      span {
        font-weight: normal;
      }
    }
    .btn_box {
      padding: 30px 0 20px;
      button {
        background: #00c4ff;
        border-color: #00c4ff;
      }
    }
    .agree_p {

      .apitext_color {
        color: #00c4ff;
      }
    }
  }
}
</style>
